<template>
  <div class="feedback-detail">
    <van-nav-bar
      class="nav-bar"
      title="反馈详情"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <van-steps :active="active" :active-color="result ? '#07c160' : '#ff0000'">
      <van-step>审核中</van-step>
      <van-step>处理中</van-step>
      <van-step>{{ result ? "已完成" : "已驳回" }}</van-step>
    </van-steps>
    <div class="content">
      <div class="feedback-time">
        反馈时间：{{ formatDate(feedback.feedBackTime) }}
      </div>
      <div class="feedback-content">
        <div>反馈内容：</div>
        <div>
          {{
            feedback.content
          }}ffafaefawfwaef发发发哇二分ffafaefawfwaef发发发哇二分ffafaefawfwaef发发发哇二分ffafaefawfwaef发发发哇二分ffafaefawfwaef发发发哇二分ffafaefawfwaef发发发哇二分ffafaefawfwaef发发发哇二分ffafaefawfwaef发发发哇二分ffafaefawfwaef发发发哇二分ffafaefawfwaef发发发哇二分ffafaefawfwaef发发发哇二分ffafaefawfwaef发发发哇二分
          ffafaefawfwaef发发发哇二分ffafaefawfwaef发发发哇二分ffafaefawfwaef发发发哇二分ffafaefawfwaef发发发哇二分ffafaefawfwaef发发发哇二分ffafaefawfwaef发发发哇二分ffafaefawfwaef发发发哇二分
        </div>
      </div>
      <div class="processing-result">
        处理结果：{{ feedback.result || "反馈处理中，暂无结果" }}
      </div>
      <div class="processing-complete-time">
        处理完成时间：{{ formatDate(feedback.completeTime) }}
      </div>
    </div>
  </div>
</template>

<script>
import { getFeedbackById } from "@/api/mobile/feedback";
export default {
  data() {
    return {
      active: 0,
      result: true,
      feedback: {},
    };
  },
  created() {
    const id = this.$route.params.id;
    this.getFeedbackById(id);
  },
  methods: {
    // 获取反馈信息
    async getFeedbackById(id) {
      const res = await getFeedbackById({ id });
      this.feedback = res.data;
      this.active = this.feedback.status - 1;
      if (this.active === 2) {
        this.result = true;
      } else if (this.active === 3) {
        this.result = false;
        this.active = 2;
      }
    },

    // 时间格式判断
    padZero(num) {
      return num < 10 ? "0" + num : num;
    },
    // 时间格式化
    formatDate(timeArray) {
      if (!timeArray) return "暂无时间";
      let year = timeArray[0];
      let month = this.padZero(timeArray[1]);
      let day = this.padZero(timeArray[2]);
      let hour = this.padZero(timeArray[3]);
      let minute = this.padZero(timeArray[4]);
      let second = this.padZero(timeArray[5]) || "00";
      return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
    },
  },
};
</script>

<style lang="less" scoped>
.feedback-detail {
  .content {
    padding: 10px 16px;
    background-color: #fff;
    line-height: 38px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    .feedback-content {
      div:nth-child(2) {
        min-height: 100px;
        max-height: 300px;
        padding: 0 6px;
        border: 1px outset;
        font-size: 13px;
        line-height: 24px;
        font-weight: normal;
        overflow-y: auto;
      }
    }
  }
}
</style>